<div class="container-fluid">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h2>工作流管理</h2>
    <div class="d-flex align-items-center">
      <button class="btn btn-primary me-2" routerLink="/workflow-designer">
        <i class="bi bi-plus-circle"></i>
        创建新工作流
      </button>
      <div class="alert alert-info mb-0 me-3" role="alert">
        <i class="bi bi-info-circle"></i>
        通过API管理工作流定义和实例
      </div>
      <button class="btn btn-outline-primary" (click)="refreshData()" [disabled]="isLoading">
        <i class="bi bi-arrow-clockwise"></i>
        刷新
      </button>
    </div>
  </div>

  <!-- 加载状态 -->
  <div class="text-center p-4" *ngIf="isLoading">
    <div class="spinner-border text-primary" role="status">
      <span class="visually-hidden">正在加载工作流信息...</span>
    </div>
    <p class="mt-2">正在加载工作流信息...</p>
  </div>

  <!-- 错误状态 -->
  <div class="alert alert-danger" *ngIf="errorMessage && !isLoading">
    <h6>连接错误：</h6>
    <p>{{ errorMessage }}</p>
    <button class="btn btn-outline-danger btn-sm" (click)="retryConnection()">
      <i class="bi bi-arrow-clockwise"></i>
      重试连接
    </button>
  </div>

  <!-- 工作流服务状态 -->
  <div class="row" *ngIf="elsaStatus && !isLoading">
    <div class="col-12">
      <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">
            <i class="bi bi-server"></i>
            工作流服务状态
          </h5>
          <span class="badge bg-success">{{ elsaStatus.Status }}</span>
        </div>
        <div class="card-body">
          <p class="mb-0">版本: {{ elsaStatus.Version }}</p>
          <p class="mb-0">API地址: {{ apiBaseUrl }}</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 工作流定义 -->
  <div class="row" *ngIf="!isLoading && !errorMessage">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0">
            <i class="bi bi-diagram-3"></i>
            工作流定义 ({{ workflows.length }})
          </h5>
        </div>
        <div class="card-body">
          <div *ngIf="workflows.length === 0" class="text-center py-3">
            <i class="bi bi-diagram-3 text-muted" style="font-size: 3rem;"></i>
            <p class="text-muted mt-2">暂无工作流定义</p>
            <small class="text-muted">点击上方按钮创建您的第一个工作流</small>
            <div class="mt-3">
              <button class="btn btn-primary" routerLink="/workflow-designer">
                <i class="bi bi-plus-circle"></i> 创建工作流
              </button>
            </div>
          </div>
          <div *ngFor="let workflow of workflows" class="border rounded p-3 mb-2">
            <h6>{{ workflow.name || workflow.definitionId }}</h6>
            <p class="small text-muted mb-2">{{ workflow.description || '无描述' }}</p>
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <span class="badge bg-info">版本 {{ workflow.version }}</span>
                <span class="badge bg-success ms-1" *ngIf="workflow.isPublished">已发布</span>
              </div>
              <div class="btn-group">
                <button 
                  class="btn btn-sm btn-outline-secondary" 
                  [routerLink]="['/workflow-designer', workflow.definitionId]"
                  title="编辑工作流">
                  <i class="bi bi-pencil"></i>
                  编辑
                </button>
                <button 
                  class="btn btn-sm btn-primary" 
                  (click)="executeWorkflow(workflow.definitionId)"
                  title="执行工作流">
                  <i class="bi bi-play-fill"></i>
                  执行
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 工作流实例 -->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0">
            <i class="bi bi-list-task"></i>
            工作流实例 ({{ workflowInstances.length }})
          </h5>
        </div>
        <div class="card-body">
          <div *ngIf="workflowInstances.length === 0" class="text-center py-3">
            <i class="bi bi-list-task text-muted" style="font-size: 3rem;"></i>
            <p class="text-muted mt-2">暂无运行实例</p>
            <small class="text-muted">执行工作流后会在这里显示</small>
          </div>
          <div *ngFor="let instance of workflowInstances" class="border rounded p-3 mb-2">
            <div class="d-flex justify-content-between align-items-start mb-2">
              <small class="text-muted">{{ instance.id }}</small>
              <span 
                class="badge"
                [ngClass]="{
                  'bg-success': instance.status === 'Finished',
                  'bg-primary': instance.status === 'Running',
                  'bg-warning': instance.status === 'Suspended',
                  'bg-danger': instance.status === 'Faulted',
                  'bg-secondary': instance.status !== 'Finished' && instance.status !== 'Running' && instance.status !== 'Suspended' && instance.status !== 'Faulted'
                }">
                {{ instance.status }}
              </span>
            </div>
            <p class="small mb-1"><strong>定义:</strong> {{ instance.definitionId }}</p>
            <p class="small mb-0"><strong>创建时间:</strong> {{ instance.createdAt | date:'medium' }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 工作流设计器选项 -->
  <div class="row mt-4" *ngIf="!isLoading && !errorMessage">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0">
            <i class="bi bi-tools"></i>
            高级工作流设计
          </h5>
        </div>
        <div class="card-body">
          <p>需要可视化工作流设计器？可以使用以下选项：</p>
          <div class="row">
            <div class="col-md-4">
              <div class="card bg-light">
                <div class="card-body">
                  <h6><i class="bi bi-palette"></i> 内置设计器</h6>
                  <p class="small">使用集成的可视化工作流设计器：</p>
                  <button class="btn btn-primary btn-sm" routerLink="/workflow-designer">
                    <i class="bi bi-diagram-3"></i>
                    打开设计器
                  </button>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card bg-light">
                <div class="card-body">
                  <h6><i class="bi bi-docker"></i> Docker 方式</h6>
                  <p class="small">运行官方Elsa Studio容器:</p>
                  <code class="d-block p-2 bg-white rounded small">
                    docker run -p 13000:8080 -e Backend__Url="{{ apiBaseUrl }}/elsa/api" elsaworkflows/elsa-server-and-studio-v3:latest
                  </code>
                  <p class="small mt-2">然后访问: <a href="http://localhost:13000" target="_blank">http://localhost:13000</a></p>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card bg-light">
                <div class="card-body">
                  <h6><i class="bi bi-browser-edge"></i> 在线设计器</h6>
                  <p class="small">在新窗口中打开外部工具:</p>
                  <a 
                    [href]="apiBaseUrl + '/swagger'" 
                    target="_blank" 
                    class="btn btn-outline-primary btn-sm me-2">
                    <i class="bi bi-api"></i>
                    API 文档
                  </a>
                  <button class="btn btn-outline-info btn-sm" disabled>
                    <i class="bi bi-gear"></i>
                    设计器 (待开发)
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> 